<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运单统计分析</title>
    <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="../../static/kj/vue.min.js"></script>
    <script src="../../static/kj/element-ui/index.js"></script>
    <script src="../../static/sa.js"></script>
    <script src="https://unpkg.com/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="c-panel f-main">
            <div class="c-title">运单统计分析</div>
            
            <!-- 时间筛选 -->
            <div class="time-filter">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-date-picker
                            v-model="timeRange"
                            type="daterange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="8">
                        <el-select v-model="selectedPeriod" @change="changePeriod">
                            <el-option label="今日" value="today"></el-option>
                            <el-option label="近7天" value="week"></el-option>
                            <el-option label="近30天" value="month"></el-option>
                            <el-option label="近90天" value="quarter"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="8">
                        <el-button type="primary" @click="refreshData">刷新数据</el-button>
                        <el-button type="success" @click="exportReport">导出报告</el-button>
                    </el-col>
                </el-row>
            </div>

            <!-- 核心指标概览 -->
            <div class="metrics-overview">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card class="metric-card volume">
                            <div class="metric-item">
                                <div class="metric-number">{{ metrics.totalVolume }}</div>
                                <div class="metric-label">总成交量(单)</div>
                                <div class="metric-trend" :class="metrics.volumeTrend > 0 ? 'positive' : 'negative'">
                                    <i :class="metrics.volumeTrend > 0 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                                    {{ Math.abs(metrics.volumeTrend) }}%
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="metric-card efficiency">
                            <div class="metric-item">
                                <div class="metric-number">{{ metrics.onTimeRate }}%</div>
                                <div class="metric-label">时效达标率</div>
                                <div class="metric-trend" :class="metrics.efficiencyTrend > 0 ? 'positive' : 'negative'">
                                    <i :class="metrics.efficiencyTrend > 0 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                                    {{ Math.abs(metrics.efficiencyTrend) }}%
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="metric-card exception">
                            <div class="metric-item">
                                <div class="metric-number">{{ metrics.exceptionRate }}%</div>
                                <div class="metric-label">异常率</div>
                                <div class="metric-trend" :class="metrics.exceptionTrend < 0 ? 'positive' : 'negative'">
                                    <i :class="metrics.exceptionTrend < 0 ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
                                    {{ Math.abs(metrics.exceptionTrend) }}%
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="metric-card revenue">
                            <div class="metric-item">
                                <div class="metric-number">{{ metrics.totalRevenue }}万</div>
                                <div class="metric-label">总营收</div>
                                <div class="metric-trend" :class="metrics.revenueTrend > 0 ? 'positive' : 'negative'">
                                    <i :class="metrics.revenueTrend > 0 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                                    {{ Math.abs(metrics.revenueTrend) }}%
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- 图表分析 -->
            <div class="charts-section">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-card header="衡阳特产运输趋势">
                            <div id="volumeChart" style="height: 300px;"></div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card header="时效达标率分析">
                            <div id="efficiencyChart" style="height: 300px;"></div>
                        </el-card>
                    </el-col>
                </el-row>
                
                <el-row :gutter="20" style="margin-top: 20px;">
                    <el-col :span="12">
                        <el-card header="衡阳地区异常分布">
                            <div id="exceptionChart" style="height: 300px;"></div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card header="衡阳运输路线热力">
                            <div id="routeChart" style="height: 300px;"></div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- 详细统计表格 -->
            <div class="statistics-table">
                <el-card header="详细统计数据">
                    <el-tabs v-model="activeStatTab">
                        <el-tab-pane label="按客户统计" name="customer">
                            <el-table :data="customerStats" border>
                                <el-table-column prop="customerName" label="客户名称" width="200"></el-table-column>
                                <el-table-column prop="totalOrders" label="总订单数" width="120"></el-table-column>
                                <el-table-column prop="completedOrders" label="完成订单" width="120"></el-table-column>
                                <el-table-column prop="onTimeRate" label="时效达标率" width="120">
                                    <template slot-scope="scope">
                                        <el-progress :percentage="scope.row.onTimeRate" :show-text="true"></el-progress>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="exceptionCount" label="异常次数" width="120"></el-table-column>
                                <el-table-column prop="totalRevenue" label="总营收(万元)" width="120"></el-table-column>
                                <el-table-column prop="satisfaction" label="满意度" width="120">
                                    <template slot-scope="scope">
                                        <el-rate v-model="scope.row.satisfaction" disabled show-score></el-rate>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        
                        <el-tab-pane label="按路线统计" name="route">
                            <el-table :data="routeStats" border>
                                <el-table-column prop="route" label="运输路线" width="250"></el-table-column>
                                <el-table-column prop="frequency" label="运输频次" width="120"></el-table-column>
                                <el-table-column prop="avgDuration" label="平均时长(小时)" width="140"></el-table-column>
                                <el-table-column prop="onTimeRate" label="时效达标率" width="120">
                                    <template slot-scope="scope">
                                        <el-progress :percentage="scope.row.onTimeRate" :show-text="true"></el-progress>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="avgCost" label="平均成本(元)" width="140"></el-table-column>
                                <el-table-column prop="profitMargin" label="利润率" width="120">
                                    <template slot-scope="scope">
                                        <span :class="scope.row.profitMargin > 15 ? 'profit-high' : scope.row.profitMargin > 10 ? 'profit-medium' : 'profit-low'">
                                            {{ scope.row.profitMargin }}%
                                        </span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        
                        <el-tab-pane label="按货物类型统计" name="cargo">
                            <el-table :data="cargoStats" border>
                                <el-table-column prop="cargoType" label="货物类型" width="150"></el-table-column>
                                <el-table-column prop="totalVolume" label="运输总量(吨)" width="140"></el-table-column>
                                <el-table-column prop="orderCount" label="订单数量" width="120"></el-table-column>
                                <el-table-column prop="avgPrice" label="平均单价(元/吨)" width="150"></el-table-column>
                                <el-table-column prop="seasonalTrend" label="季节性趋势" width="150">
                                    <template slot-scope="scope">
                                        <el-tag :type="getTrendType(scope.row.seasonalTrend)" size="mini">
                                            {{ scope.row.seasonalTrend }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="marketShare" label="市场占比" width="120">
                                    <template slot-scope="scope">
                                        <el-progress :percentage="scope.row.marketShare" :show-text="true"></el-progress>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    timeRange: [],
                    selectedPeriod: 'month',
                    metrics: {
                        totalVolume: 1248,
                        volumeTrend: 12.5,
                        onTimeRate: 94.2,
                        efficiencyTrend: 3.8,
                        exceptionRate: 2.1,
                        exceptionTrend: -1.2,
                        totalRevenue: 156.8,
                        revenueTrend: 8.9
                    },
                    activeStatTab: 'customer',
                    customerStats: [
                        {
                            customerName: '衡阳湘莲合作社',
                            totalOrders: 186,
                            completedOrders: 178,
                            onTimeRate: 96,
                            exceptionCount: 2,
                            totalRevenue: 52.8,
                            satisfaction: 4.9
                        },
                        {
                            customerName: '衡阳祁东黄花菜专业合作社',
                            totalOrders: 128,
                            completedOrders: 124,
                            onTimeRate: 97,
                            exceptionCount: 1,
                            totalRevenue: 38.2,
                            satisfaction: 4.8
                        },
                        {
                            customerName: '衡阳南岳茶油加工厂',
                            totalOrders: 156,
                            completedOrders: 148,
                            onTimeRate: 95,
                            exceptionCount: 3,
                            totalRevenue: 45.6,
                            satisfaction: 4.7
                        }
                    ],
                    routeStats: [
                        {
                            route: '衡阳→长沙',
                            frequency: 65,
                            avgDuration: 3.5,
                            onTimeRate: 98,
                            avgCost: 850,
                            profitMargin: 22.8
                        },
                        {
                            route: '衡阳→武汉',
                            frequency: 42,
                            avgDuration: 5.2,
                            onTimeRate: 96,
                            avgCost: 1350,
                            profitMargin: 18.5
                        },
                        {
                            route: '衡阳祁东→衡阳市区',
                            frequency: 89,
                            avgDuration: 1.5,
                            onTimeRate: 99,
                            avgCost: 320,
                            profitMargin: 25.6
                        }
                    ],
                    cargoStats: [
                        {
                            cargoType: '衡阳湘莲',
                            totalVolume: 1850,
                            orderCount: 186,
                            avgPrice: 2800,
                            seasonalTrend: '夏季旺盛',
                            marketShare: 42
                        },
                        {
                            cargoType: '祁东黄花菜',
                            totalVolume: 1260,
                            orderCount: 128,
                            avgPrice: 3200,
                            seasonalTrend: '全年稳定',
                            marketShare: 28
                        },
                        {
                            cargoType: '南岳茶油',
                            totalVolume: 980,
                            orderCount: 156,
                            avgPrice: 4500,
                            seasonalTrend: '春节峰值',
                            marketShare: 22
                        }
                    ]
                }
            },
            methods: {
                changePeriod(period) {
                    const today = new Date();
                    let startDate = new Date();
                    
                    switch(period) {
                        case 'today':
                            startDate = new Date(today);
                            break;
                        case 'week':
                            startDate.setDate(today.getDate() - 7);
                            break;
                        case 'month':
                            startDate.setDate(today.getDate() - 30);
                            break;
                        case 'quarter':
                            startDate.setDate(today.getDate() - 90);
                            break;
                    }
                    
                    this.timeRange = [
                        startDate.toISOString().split('T')[0],
                        today.toISOString().split('T')[0]
                    ];
                },
                refreshData() {
                    this.$message.success('数据已刷新');
                },
                exportReport() {
                    this.$message.success('统计报告导出成功');
                },
                getTrendType(trend) {
                    if (trend.includes('稳定') || trend.includes('旺盛')) return 'success';
                    if (trend.includes('峰值')) return 'warning';
                    if (trend.includes('夏季')) return 'danger';
                    return 'info';
                },
                
                // 初始化成交量趋势图表
                initVolumeChart() {
                    const chart = echarts.init(document.getElementById('volumeChart'));
                    const option = {
                        title: {
                            text: '衡阳特产运输量月度趋势',
                            left: 'center',
                            textStyle: {
                                fontSize: 14,
                                color: '#333'
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: function(params) {
                                let result = params[0].name + '<br>';
                                params.forEach(item => {
                                    result += item.seriesName + ': ' + item.value + '吨<br>';
                                });
                                return result;
                            }
                        },
                        legend: {
                            data: ['湘莲', '黄花菜', '茶油'],
                            bottom: 10
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '15%',
                            top: '20%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value}吨'
                            }
                        },
                        series: [
                            {
                                name: '湘莲',
                                type: 'line',
                                data: [120, 150, 180, 220, 280, 350, 420, 380, 280, 200, 160, 130],
                                smooth: true,
                                itemStyle: {
                                    color: '#409EFF'
                                }
                            },
                            {
                                name: '黄花菜',
                                type: 'line',
                                data: [80, 85, 90, 95, 100, 105, 110, 115, 108, 98, 88, 85],
                                smooth: true,
                                itemStyle: {
                                    color: '#67C23A'
                                }
                            },
                            {
                                name: '茶油',
                                type: 'line',
                                data: [60, 120, 80, 75, 70, 68, 65, 70, 75, 85, 110, 150],
                                smooth: true,
                                itemStyle: {
                                    color: '#E6A23C'
                                }
                            }
                        ]
                    };
                    chart.setOption(option);
                    window.addEventListener('resize', () => chart.resize());
                },
                
                // 初始化时效达标率图表
                initEfficiencyChart() {
                    const chart = echarts.init(document.getElementById('efficiencyChart'));
                    const option = {
                        title: {
                            text: '衡阳地区时效达标率',
                            left: 'center',
                            textStyle: {
                                fontSize: 14,
                                color: '#333'
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: '{b}: {c}%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '10%',
                            top: '20%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['衡阳→长沙', '衡阳→武汉', '衡阳→广州', '衡阳市内', '衡阳→株洲', '衡阳→岳阳']
                        },
                        yAxis: {
                            type: 'value',
                            min: 90,
                            max: 100,
                            axisLabel: {
                                formatter: '{value}%'
                            }
                        },
                        series: [{
                            type: 'bar',
                            data: [98, 96, 94, 99, 97, 95],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {offset: 0, color: '#67C23A'},
                                    {offset: 1, color: '#409EFF'}
                                ])
                            },
                            barWidth: '60%'
                        }]
                    };
                    chart.setOption(option);
                    window.addEventListener('resize', () => chart.resize());
                },
                
                // 初始化异常分布饼图
                initExceptionChart() {
                    const chart = echarts.init(document.getElementById('exceptionChart'));
                    const option = {
                        title: {
                            text: '衡阳地区运输异常分布',
                            left: 'center',
                            textStyle: {
                                fontSize: 14,
                                color: '#333'
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: ['天气影响', '道路施工', '车辆故障', '交通拥堵', '其他']
                        },
                        series: [{
                            name: '异常类型',
                            type: 'pie',
                            radius: '50%',
                            center: ['50%', '60%'],
                            data: [
                                {value: 35, name: '天气影响', itemStyle: {color: '#F56C6C'}},
                                {value: 25, name: '道路施工', itemStyle: {color: '#E6A23C'}},
                                {value: 20, name: '车辆故障', itemStyle: {color: '#409EFF'}},
                                {value: 15, name: '交通拥堵', itemStyle: {color: '#67C23A'}},
                                {value: 5, name: '其他', itemStyle: {color: '#909399'}}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    };
                    chart.setOption(option);
                    window.addEventListener('resize', () => chart.resize());
                },
                
                // 初始化路线热力图
                initRouteChart() {
                    const chart = echarts.init(document.getElementById('routeChart'));
                    const option = {
                        title: {
                            text: '衡阳运输路线热力图',
                            left: 'center',
                            textStyle: {
                                fontSize: 14,
                                color: '#333'
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function(params) {
                                return params.name + '<br/>运输频次: ' + params.value + '次/月';
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '10%',
                            top: '20%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['长沙', '武汉', '广州', '株洲', '岳阳', '郴州'],
                            name: '目的地'
                        },
                        yAxis: {
                            type: 'category',
                            data: ['湘莲', '黄花菜', '茶油', '土鸡蛋', '其他'],
                            name: '特产类型'
                        },
                        visualMap: {
                            min: 0,
                            max: 100,
                            calculable: true,
                            orient: 'horizontal',
                            left: 'center',
                            bottom: '5%',
                            inRange: {
                                color: ['#50a3ba', '#eac736', '#d94e5d']
                            }
                        },
                        series: [{
                            name: '运输频次',
                            type: 'heatmap',
                            data: [
                                [0, 0, 85], [1, 0, 65], [2, 0, 45], [3, 0, 35], [4, 0, 25], [5, 0, 15],
                                [0, 1, 75], [1, 1, 55], [2, 1, 35], [3, 1, 25], [4, 1, 18], [5, 1, 12],
                                [0, 2, 65], [1, 2, 45], [2, 2, 25], [3, 2, 18], [4, 2, 12], [5, 2, 8],
                                [0, 3, 55], [1, 3, 35], [2, 3, 20], [3, 3, 15], [4, 3, 10], [5, 3, 5],
                                [0, 4, 25], [1, 4, 15], [2, 4, 10], [3, 4, 8], [4, 4, 5], [5, 4, 3]
                            ],
                            label: {
                                show: true
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    };
                    chart.setOption(option);
                    window.addEventListener('resize', () => chart.resize());
                }
            },
            mounted() {
                this.changePeriod('month');
                // 初始化所有图表
                this.$nextTick(() => {
                    this.initVolumeChart();
                    this.initEfficiencyChart();
                    this.initExceptionChart();
                    this.initRouteChart();
                });
            }
        });
    </script>

    <style scoped>
        .time-filter {
            background: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        
        .metrics-overview {
            margin-bottom: 30px;
        }
        
        .metric-card {
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .metric-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .metric-card.volume {
            border-left: 4px solid #409EFF;
        }
        
        .metric-card.efficiency {
            border-left: 4px solid #67C23A;
        }
        
        .metric-card.exception {
            border-left: 4px solid #F56C6C;
        }
        
        .metric-card.revenue {
            border-left: 4px solid #E6A23C;
        }
        
        .metric-number {
            font-size: 28px;
            font-weight: bold;
            color: #303133;
            margin-bottom: 5px;
        }
        
        .metric-label {
            color: #606266;
            margin-bottom: 8px;
        }
        
        .metric-trend {
            font-size: 12px;
            font-weight: bold;
        }
        
        .metric-trend.positive {
            color: #67C23A;
        }
        
        .metric-trend.negative {
            color: #F56C6C;
        }
        
        .charts-section {
            margin-bottom: 30px;
        }
        
        .statistics-table {
            margin-bottom: 20px;
        }
        
        .profit-high {
            color: #67C23A;
            font-weight: bold;
        }
        
        .profit-medium {
            color: #E6A23C;
            font-weight: bold;
        }
        
        .profit-low {
            color: #F56C6C;
            font-weight: bold;
        }
    </style>
</body>
</html>